<template>
    <div class="cart-list" >
        <van-empty
        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        image-size="120"
        description="购物车为空, 请选购商品"
        v-if="paid.length === 0"
      />
    </div>
    
    <div class="menu-list" >
                        <div v-for="item in paid" :key="item.id">
                            <div class="time">
                                <span>2023-2-6</span>
                                <span>交易成功&nbsp;&nbsp;|&nbsp;&nbsp;<van-icon name="delete-o"  @click="deleteGoods(item.id)"/></span>
                            </div>
                            <div @click="todetail(item.id)"> 
                                <van-card num="2" :price="item.price" desc="02月10日提货" :title="item.shop"
                                    :thumb="item.picture">
                                </van-card>            
                                    <van-button round color="#ED0D5B" plain size="small"
                                        type="danger" @click="buytoo">再次购买</van-button>
                            </div>
                            <hr>
                        </div>
                    </div>
</template>

<script setup lang="ts">
import { usePyStore } from '@/stores/pyok';
import {type Ref ,ref} from 'vue'
import { useCartStore } from '@/stores/cart';
import {Toast} from 'vant'
import {useRouter} from 'vue-router'

const router = useRouter()
const usepyok = usePyStore()
const useCart = useCartStore()

const paid:Ref<Array<any>> = ref([])
// 遍历对象 返回一个新的数组
paid.value = usepyok.list.map(item=>item)

// 删除
const deleteGoods =(id:number)=>{
    const index = paid.value.findIndex(item=>item.id==id)
    paid.value.splice(index,1)  
    console.log(paid.value);
}
// 再次购买方法
const buytoo = (item:any)=>{
    useCart.saveCart(item)
    Toast('加入购物车成功')
}
// 商品详情
const todetail = (id:number)=>{
    router.push({path:'/detail',query:{id}})
} 

</script>

<style scoped lang="scss">
.cart-list {
    width: 100%;
    background-color:#FFFFFF;

    img {
        margin: 5% 5%;
        width: 90%;
        height: 90%;
    }

    .van-button {
        margin: 0 8%;
        width: 80%;
    }
}
.menu-list {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-direction: column;

    .time {
        padding: 5px 24px 5px 24px;
        display: flex;
        justify-content: space-between;
        background-color: #ffffff;

    }

    .time2 {
        padding: 5px 24px 5px 24px;
        display: flex;
        justify-content: space-between;
        background-color: #ffffff;

        .redsapn {
            color: red;
        }
    }
    .van-button{
        float: right;
    }
}
</style>